<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>类型模板管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../plugins/select2/select2.css" />
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>

</head>

	<body class="hold-transition skin-red sidebar-mini" >
		<div class="box-header with-border">
			<h3 class="box-title">商品类型模板管理</h3>
		</div>

		<div class="box-body">
			<!-- 数据表格 -->
			<div class="table-box">
				<!--工具栏-->
				<div class="pull-left">
					<div class="form-group form-inline">
						<div class="btn-group">
							<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" onclick="pinpai()"><i class="fa fa-file-o"></i> 新建</button>
							<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
						</div>
					</div>
				</div>
				<div class="box-tools pull-right">
					<div class="has-feedback">
						分类模板名称：<input type="text" id="idname">
						<button class="btn btn-default" onclick="muban()">查询</button>
					</div>
				</div>
				  <!--数据列表-->
				  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
					  <thead>
						  <tr>
							  <th class="" style="padding-right:0px">
								  <input id="selall" type="checkbox" class="icheckbox_square-blue">
							  </th>
							  <th class="sorting_asc">模板ID</th>
							  <th class="sorting">分类模板名称</th>
							  <th class="sorting">关联品牌</th>
							  <th class="sorting">关联规格</th>
							  <th class="sorting">扩展属性</th>
							  <th class="text-center">操作</th>
						  </tr>
					  </thead>
					  <tbody id="mkuai">

					  </table>
			</div>
		 </div>

<!-- 编辑窗口 -->
	<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">商品类型模板编辑</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>商品类型</td>
		      		<td><input  class="form-control" placeholder="商品类型" id="zjname"></td>
		      	</tr>			   
		      	<tr>
		      		<td>关联品牌</td>
		      		<td >
		      			<select id="pinpaiId" multiple style="width: 100%"></select>
		      		</td>
		      	</tr>
		      	<tr>
		      		<td>关联规格</td>
		      		<td>
						<select id="guigeId" multiple style="width: 100%"></select>
		      		</td>
		      	</tr>	
		      	
		      	<tr>
		      		<td>扩展属性</td>
		      		<td>
		      			<div class="btn-group">
                             <button type="button" class="btn btn-default" onclick="addTable(1)" title="新增扩展属性"><i class="fa fa-file-o"></i> 新增扩展属性</button>
                        </div>
						<table class="table table-bordered table-striped"  width="800px">
							<thead>
								<tr>
									<td>属性名称</td>
									<td>操作</td>
								</tr>
							</thead>
							<tbody id="mu">

							</tbody>
						</table>	
           
		      		</td>
		      	</tr>	
		      	      
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" data-dismiss="modal" onclick="insert()" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
	<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" >
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h3 id="asd">商品类型模板编辑</h3>
					</div>
					<div class="modal-body">

						<table class="table table-bordered table-striped"  width="800px">
							<tr>
								<td>商品类型</td>
								<input type="hidden" id="upid">
								<td><input  class="form-control" placeholder="商品类型" id="upname"></td>
							</tr>
							<tr>
								<td>关联品牌</td>
								<td >
									<select id="uppinpaiId" multiple style="width: 100%"></select>
								</td>
							</tr>
							<tr>
								<td>关联规格</td>
								<td>
									<select id="upguigeId" multiple style="width: 100%"></select>
								</td>
							</tr>

							<tr>
								<td>扩展属性</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-default" onclick="addTable(2)" title="新增扩展属性"><i class="fa fa-file-o"></i> 新增扩展属性</button>
									</div>
									<table class="table table-bordered table-striped"  width="800px">
										<thead>
										<tr>
											<td>属性名称</td>
											<td>操作</td>
										</tr>
										</thead>
										<tbody id="upmu">

										</tbody>
									</table>

								</td>
							</tr>

						</table>

					</div>
					<div class="modal-footer">
						<button class="btn btn-success" data-dismiss="modal" onclick="update()" aria-hidden="true">保存</button>
						<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
					</div>
				</div>
			</div>
		</div>

	</body>
<script>
	$(function (){
		muban();
	})

	//JS增加
	function addTable(obj) {
		var today = $("#mu")
		var todays = $("#upmu")
		var tr = document.createElement("tr");
		tr.innerHTML=
				'<td><input className="form-control"  placeholder="扩展属性"></td>'+
				'<td>'+
				'<button type="button" onclick="deleteTable(this)" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>' +
				'</td>';
		if(obj == 1){
			$(today).append(tr);
		}else if (obj == 2){
			$(todays).append(tr);
		}

	}

	function insert(){

		var zjname = $("#zjname").val();
		//定义一个集合
		var optionlist = [];
		//获取所有的tr
		var trs = $("#mu").find("tr");
		//从第一个到最后一个
		for (var i = 0; i < trs.length; i++) {
			//每一行的td
			var tds = $(trs[i]).find("td");
			//拿到第一列与第二列
			//拿到name值
			var optionname = $(tds[0]).find("input").val();

			optionlist.push({text:optionname})
		}
		var optionlistjson = JSON.stringify(optionlist);
		var p = $("#pinpaiId").select2('data');
		var str = [];
		$.each(p,function(i,e){
			var pjson = {"id":e.id,"text":e.text}
			str.push(pjson)
		})
		var a = JSON.stringify(str);
		var g = $("#guigeId").select2('data');
		var arr = [];
		$.each(g,function(i,e){
			var gjson = {"id":e.id,"text":e.text}
			arr.push(gjson)
		})
		var b = JSON.stringify(arr);
		$.ajax({
			url:"/typeTemplateController/insert",
			type:"post",
			data:{name:zjname,specIds:b,brandIds:a,customAttributeItems:optionlistjson},
			dataType:"json",
			async:false,
			success:function (set){
				if(set.code == 1){
					alert(set.massager)
					window.location.reload();
				}else {
					alert(set.massager)
					window.location.reload();
				}
			},
			error:function (){
				alert("模块增加系统错误")
			}
		})
	}


	//JS删除
	function deleteTable(obj) {
		var tr = obj.parentNode.parentNode;
		// var today = $("#mu");
		tr.parentNode.removeChild(tr);
	}


	function pinpai(){
		$.ajax({
			url:"/typeTemplateController/pinpai",
			type:"post",
			dataType:"json",
			async:false,
			success:function (set){
				if(set.code == 1){
					var brandlist = set.resout;
					var pin = ""
					for (var i = 0; i < brandlist.length; i++) {
						pin += '<option name="pinp" value="'+brandlist[i].id+'">'+brandlist[i].name+'</option>'
					}
					$("#pinpaiId").html(pin)
					$("#uppinpaiId").html(pin)
					$("#pinpaiId").select2();
					$("#uppinpaiId").select2();
					guige();
				}else{
					alert(set.massager);
				}
			},
			error:function (){
				alert("品牌数据查询系统错误")
			}
		})
	}

	function guige(){
		$.ajax({
			url:"/typeTemplateController/guige",
			type:"post",
			dataType:"json",
			async:false,
			success:function (set){
				if(set.code == 1){
					var spec = set.resout;
					var option = ""
					for (var i = 0; i < spec.length; i++) {
						option += '<option name="guige" value="'+spec[i].id+'">'+spec[i].specName+'</option>'
					}
					$("#guigeId").html(option)
					$("#upguigeId").html(option)
					$("#upguigeId").select2();
					$("#guigeId").select2();
				}else{
					alert(set.massager);
				}
			},
			error:function (){
				alert("规格数据查询系统错误")
			}
		})
	}

	function muban(){
		var idname = $("#idname").val()
		$.ajax({
			url:"/typeTemplateController/template",
			type:"post",
			data:{name:idname},
			dataType:"json",
			async:false,
			success:function (set){
				if(set.code == 1){
					var tmple = set.resout;
					var splicing = ""
					for (var i = 0; i < tmple.length; i++) {
						splicing += "<tr>"
						splicing += '<td><input type="checkbox"></td>'
						splicing += '<td>'+tmple[i].id+'</td>'
						splicing += '<td>'+tmple[i].name+'</td>'

						var jsonbrand = JSON.parse(tmple[i].brandIds);
						var asd = ""
						for (var q = 0; q < jsonbrand.length; q++) {
							asd += "," + jsonbrand[q].text;
						}
						var pin = asd.substring(1);
						splicing += '<td>'+pin+'</td>'
						var jsonsprc = JSON.parse(tmple[i].specIds);
						var str = "";
						for (var j = 0; j < jsonsprc.length; j++) {
							str += "," +jsonsprc[j].text;
						}
						var gui = str.substring(1);
						splicing += '<td>'+gui+'</td>'
						var custjson = JSON.parse(tmple[i].customAttributeItems);
						var qwe = "";
						for (var w = 0; w < custjson.length; w++) {
							qwe += "," + custjson[w].text;
						}
						var kuozhan = qwe.substring(1);
						splicing += '<td>'+kuozhan+'</td>'
						splicing += '<td className="text-center">'
						splicing += '<button type="button" className="btn bg-olive btn-xs" data-toggle="modal" data-target="#update" onclick="toupdate('+tmple[i].id+')">修改</button>'
						splicing += '<button type="button" className="btn bg-olive btn-xs" data-toggle="modal" onclick="deletez('+tmple[i].id+')">删除</button>'
						splicing += '</td>'
						splicing += '</tr>'
					}
					$("#mkuai").html(splicing);
				}
			},
			error:function (){
				alert("品牌数据查询系统错误")
			}
		})
	}

	function toupdate(id){
		pinpai();
		$.ajax({
			url:"/typeTemplateController/toupdate",
			type:"post",
			data:{id:id},
			dataType:"json",
			async:false,
			success:function(set){
				if(set.code == 1){
					var tbtype = set.resout;
					//回显id
					$("#upid").val(tbtype.id)

					//回显名称
					$("#upname").val(tbtype.name)

					//规格
					var specJson = JSON.parse(tbtype.specIds)
					var spearr = [];
					$.each(specJson,function(i,e){
						spearr.push(e.id);
					})
					$("#upguigeId").val(spearr).trigger("change")

					//品牌
					var branJson = JSON.parse(tbtype.brandIds)
					var branarr = [];
					$.each(branJson,function (i,e){
						branarr.push(e.id);
					})
					$("#uppinpaiId").val(branarr).trigger("change")

					var custJson = JSON.parse(tbtype.customAttributeItems)
					var today = $("#upmu");
					var tr1="";
					for (var i = 0; i < custJson.length; i++) {
						var tr ='<tr>'+
								'<td>' +
								'<input  class="form-control" placeholder="" value="'+custJson[i].text+'" name="optionName1">' +
								'</td>'+
								'<td>'+
								'<button type="button" onclick="deleteTable(this)" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>' +
								'</td>'+
									'</tr>';
						tr1+=tr;
					}
					$("#upmu").html(tr1);
				}else {
					alert(set.massager)
				}
			},
			error:function (){
				alert("回显数据系统错误")
			}
		})
	}

	function deletez(id){
		if(confirm("确定删除吗?")) {
			$.ajax({
				url: "/typeTemplateController/delete",
				type: "post",
				dataType: "json",
				data: {id: id},
				success: function (set) {
					if (set.code) {
						alert(set.massager)
						window.location.reload();
					} else {
						alert(set.massager)
						window.location.reload();
					}
				},
				error: function () {
					alert("删除系统错误")
				}
			})
		}
	}

	function update(){
		var tid = $("#upid").val();
		var tname = $("#upname").val();
		//定义一个集合
		var optionlist = [];
		//获取所有的tr
		var trs = $("#upmu").find("tr");
		//从第一个到最后一个
		for (var i = 0; i < trs.length; i++) {
			//每一行的td
			var tds = $(trs[i]).find("td");
			//拿到第一列与第二列
			//拿到name值
			var optionname = $(tds[0]).find("input").val();
			optionlist.push({text:optionname})
		}
		var optionlistjson = JSON.stringify(optionlist);
		var p = $("#uppinpaiId").select2('data');
		var str = [];
		$.each(p,function(i,e){
			var pjson = {"id":e.id,"text":e.text}
			str.push(pjson)
		})
		var a = JSON.stringify(str);
		var g = $("#upguigeId").select2('data');
		var arr = [];
		$.each(g,function(i,e){
			var gjson = {"id":e.id,"text":e.text}
			arr.push(gjson)
		})
		var b = JSON.stringify(arr);
		$.ajax({
			url:"/typeTemplateController/update",
			type:"post",
			data:{id:tid,name:tname,specIds:b,brandIds:a,customAttributeItems:optionlistjson},
			dataType:"json",
			async:false,
			success:function (set){
				if(set.code == 1){
					alert(set.massager)
					window.location.reload();
				}else {
					alert(set.massager)
					window.location.reload();
				}
			},
			error:function (){
				alert("模块增加系统错误")
			}
		})

	}
</script>
</html>